<template>
  <button class="btn" @click="btn">删除</button>
  <div class="mask" v-if="isShow" @click="del">
      <div class="hint">确认删除吗
          <span class="del" @click="del">×</span>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(false)
const btn = () => {
  isShow.value = true
}
const del = () => {
  isShow.value = false
}

</script>

<style lang="scss" scoped>
.btn {
          width: 100px;
          height: 50px;
          background-color: black;
          border-radius: 10px;
          color: #fff;
          font-size: 20px;
      }
      .btn:hover {
          cursor: pointer;
      }
      .del:hover {
          cursor: pointer;
      }
      .mask {
          position: fixed;
          top: 0;
          left: 0; 
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
      }
     .hint {
          width: 200px;
          height: 100px;
          background-color: #fff; 
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .del {
          margin-left: 10px;
      }
</style>